<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div v-if="productInfo">
          <span style="font-size: 16px; margin-right: 20px">产品
            {{ getProductName(productInfo) }}</span>
          <!-- statusType -->
          <el-tag
            type="warning"
            size="small"
          >
            <product-status
              types="detail"
              :datas="productInfo"
            />
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
        <template v-if="productInfo&&productInfo.productStatus!=='-4'&&productInfo.flowStatus!=='DOING'">
          <el-button
            v-auth="{v: ['crm:product:delete'], bool: productInfo.productStatus==='-1'||productInfo.productStatus==='-2'}"
            size="small"
            class="border-danger"
            @click="deleteProduct"
          >删除</el-button>
          <el-button
            v-auth="{v: ['crm:product:soldOut'], bool: productInfo.productStatus==='2'}"
            type="primary"
            size="small"
            @click="soldOutProduct"
          >下架</el-button>
          <el-button
            v-auth="{v: ['crm:product:edit'], bool: productInfo.productStatus==='-1'||productInfo.productStatus==='-2'||productInfo.flowStatus==='REJECT_INITIATOR'}"
            type="primary"
            size="small"
            @click="editProduct"
          >编辑</el-button>
          <el-button
            v-auth="{v: ['crm:product:change'], bool: productInfo.productStatus==='2'}"
            type="primary"
            size="small"
            @click="changeProduct"
          >变更</el-button>
        </template>
      </template>
    </header-module>
    <div
      v-if="productInfo"
      class="info-container"
      style="margin-bottom: 20px;"
    >
      <el-form
        class="form-detail"
        label-position="right"
        label-width="90px"
        inline
        :model="productInfo"
      >
        <el-form-item
          label="产品编号："
          style="width: 25%"
        >
          <div>{{ productInfo.productNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="产品别名："
          style="width: 25%"
        >
          <div>{{ productInfo.productAlias || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="批准文号："
          style="width: 25%"
        >
          <div>{{ productInfo.approvalNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="市场价："
          style="width: 25%"
        >
          <div>
            <span>{{ productInfo.marketPrice }}元 / {{ getLabel('sell_unit', productInfo.sellUnit) }}</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">

      <el-tabs
        v-model="activeName"
        class="elTabs"
        @tab-click="tabClick"
      >
        <el-tab-pane
          label="详细信息"
          name="1"
        >
          <baseInfo
            v-if="activeName==='1'"
            :detail-data="productInfo"
            :not-include="['marketPrice']"
          />
        </el-tab-pane>
        <!--
        <el-tab-pane
          v-if="productInfo.productStatus==='1'||productInfo.productStatus==='-2'"
          label="产品价格"
          name="2"
        >
          <productAndPrice
            v-if="activeName==='2'"
            :detail="productInfo"
          />
        </el-tab-pane>
        -->
        <!-- <el-tab-pane
          label="市场管理"
          name="3"
          v-if="productInfo.productStatus==='1'||productInfo.productStatus==='-2'"
        >
          <market-management v-if="activeName==='3'" />
        </el-tab-pane> -->
        <!--
        <el-tab-pane
          v-if="productInfo.productStatus==='1'||productInfo.productStatus==='-2'"
          label="进货关系及价格"
          name="4"
        >
          <purchase-and-price
            v-if="activeName==='4'"
            :detail="productInfo"
          />
        </el-tab-pane>
        -->
        <el-tab-pane
          label="操作记录"
          name="5"
        >
          <operation-view
            v-if="activeName==='5'"
            :id="productId"
            mode="product"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 创建编辑弹框 -->
    <createOrEdit
      ref="createChangeDialog"
      @success="createEditSuccess"
    />
    <!-- 下架弹框 -->
    <soldOutProductDialog
      ref="soldOutDialog"
      @soldOutSuccess="soldOutSuccess"
    />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  components: {
    baseInfo: defineAsyncComponent(() => import('./baseInfo/index.vue')),
    // productAndPrice: defineAsyncComponent(() =>
    //   import('./productAndPrice/index.vue')
    // ),
    // marketManagement: defineAsyncComponent(() =>
    //   import('./marketManagement/index.vue')
    // ),
    // purchaseAndPrice: defineAsyncComponent(() =>
    //   import('./purchaseAndPrice/index.vue')
    // ),
    createOrEdit: defineAsyncComponent(() =>
      import('../modules/createOrEdit.vue')
    ),
    soldOutProductDialog: defineAsyncComponent(() =>
      import('../modules/soldOutProductDialog.vue')
    ),
    productStatus: defineAsyncComponent(() =>
      import('../modules/productStatus.vue')
    ),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const createChangeDialog = ref(null)
    const soldOutDialog = ref(null)
    var productId = Number(route.query.productId) || 0
    var activeName = ref('1')
    var productDetail = reactive({
      statusType: 'success',
      productInfo: null,
    })
    const back = () => {
      router.back()
    }
    const tabClick = (val) => {
      console.log(val)
    }
    const createEditSuccess = () => {
      getProductDetail(productId)
    }
    // 获取产品详情
    const getProductDetail = (productId) => {
      api.product
        .PRODUCT_DETAIL({
          id: productId,
        })
        .then((res) => {
          if (res.code) {
            console.log(res.msg)
          } else {
            productDetail.productInfo = res.data.productInfo
            // getStatusType(productDetail.productInfo)
          }
        })
    }
    const getStatusType = (detail) => {
      if (detail.productStatus === '1') {
        if (detail.flowStatus !== 'AGREE') {
          productDetail.statusType = 'warning'
        } else {
          productDetail.statusType = 'success'
        }
      } else if (
        detail.productStatus === '-1' ||
        detail.productStatus === '-2'
      ) {
        productDetail.statusType = 'warning'
      }
    }
    // 删除产品
    const deleteProduct = () => {
      currentInstance.proxy
        .alertBox({
          message: '数据删除后不可恢复，确定删除？',
          title: '产品删除',
        })
        .then(() => {
          api.product
            .PRODUCT_DELETE({
              id: productId,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                router.back()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 变更产品
    const changeProduct = () => {
      createChangeDialog.value.open('change', productId)
    }
    // 编辑产品
    const editProduct = () => {
      createChangeDialog.value.open('edit', productId)
    }
    // 下架产品
    const soldOutProduct = () => {
      console.log('下架产品')
      soldOutDialog.value.open(productId)
    }
    // 下架成功
    const soldOutSuccess = () => {
      console.log('下架成功')
      getProductDetail(productId)
    }
    onMounted(() => {
      getProductDetail(productId)
    })
    return {
      activeName,
      productId,
      ...toRefs(productDetail),
      createChangeDialog,
      soldOutDialog,
      back,
      tabClick,
      changeProduct,
      editProduct,
      soldOutProduct,
      soldOutSuccess,
      deleteProduct,
      createEditSuccess,
    }
  },
}
</script>

<style lang="scss" scoped>
.info-container {
  background: #fff;
  padding: 10px 20px;
}
</style>
